<template>
  <view class="router-view bcl-active" v-show="awaitStatus">
    <!-- 认证成功 -->
    <view class="container" v-if="authInfo.status === 1">
      <view class="success-icon bcl-success cl-white circle p-10">
        <image
          src="/static/icons/success.png"
          class="width height block"
          mode="widthFix"
        />
      </view>
      <view class="text-center fz-18 bold">恭喜，您已经通过了企业认证</view>

      <view class="mt-20 fz-15 lh-2">
        <view class="box">
          <view class="mr-10">公司名称：</view>
          <view class="box-1">{{ authInfo.company_info.company_name }}</view>
        </view>
        <view class="box">
          <view class="mr-10">所属行业：</view>
          <view class="box-1">{{ authInfo.cate_name }}</view>
        </view>
        <view class="box">
          <view class="mr-10">证件图片：</view>
          <view class="box-1 cl-second">已做隐私处理，不显示具体内容</view>
        </view>
      </view>
    </view>

    <!-- 认证中 -->
    <view class="container" v-else-if="authInfo.status === 0">
      <view class="text-center">
        <text class="icon icon-info fz-40 cl-warning circle mr-10"></text>
      </view>
      <view class="text-center fz-18 bold mt-15"
        >很高兴您的入驻，我们会尽快完成认证！</view
      >

      <view class="mt-20 fz-15 lh-2">
        <view class="box">
          <view class="mr-10">公司名称：</view>
          <view class="box-1">{{ authInfo.company_info.company_name }}</view>
        </view>
        <view class="box">
          <view class="mr-10">所属行业：</view>
          <view class="box-1">{{ authInfo.cate_name }}</view>
        </view>
        <view class="box">
          <view class="mr-10">证件图片：</view>
          <view class="box-1 cl-second">已做隐私处理，不显示具体内容</view>
        </view>
      </view>
    </view>

    <view class="user-form bcl-white mb-15" v-else>
      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">企业名称</view>
        <view class="uni-input text-right bcl-white">
          <input type="text" placeholder="输入企业名称" v-model="companyName" />
        </view>
      </view>

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">法定代表人</view>
        <view class="uni-input text-right bcl-white">
          <input
            type="text"
            placeholder="请输入法定代表人姓名"
            v-model="name"
          />
        </view>
      </view>

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">法定代表身份证号</view>
        <view class="uni-input text-right bcl-white">
          <input
            type="idcard"
            placeholder="请输入法定代表身份证号"
            v-model="idcard"
          />
        </view>
      </view>

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">所属行业</view>
        <view class="uni-input bcl-white">
          <picker
            mode="multiSelector"
            range-key="name"
            :value="serviceForm.classify"
            :range="pickerClassifys"
            @columnchange="onClassifyColumnChange"
            @change="onClassifyChange"
          >
            <view class="input"
              >{{ classifys[serviceForm.classify[0]].name }}/{{
                classifys[serviceForm.classify[0]]._child[
                  serviceForm.classify[1]
                ].name
              }}/{{
                classifys[serviceForm.classify[0]]._child[
                  serviceForm.classify[1]
                ]._child[serviceForm.classify[2]].name
              }}</view
            >
          </picker>
        </view>
      </view>

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">所在城市</view>
        <view class="uni-input bcl-white">
          <!-- <picker mode="region" class="width" @change="changeArea">
						 <view class="height text-right">
							<text v-if="address.length">{{address[0]}}{{address[1]}}{{address[2]}}</text>
							<text v-else class="cl-second">请选择地址</text>
						 </view>
					</picker> -->
          <picker
            mode="multiSelector"
            range-key="label"
            :value="addressIndex"
            :range="[provinceData, cityData[provinceIndex]]"
            @columnchange="changeProvince"
            @change="changeAddress"
          >
            <view class="input">{{ address[0] }}/{{ address[1] }}</view>
          </picker>
        </view>
      </view>

      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">公司地址</view>
        <view class="uni-input text-right bcl-white">
          <input
            type="text"
            placeholder="请输入营业执照地址"
            v-model="companyAddress"
          />
        </view>
      </view>

      <view class="fz-15 bold container mt-20">
        <!-- 身份证照 -->
        <view
          class="container box border shadow box-column-center mb-15 bcl-white radius company-block"
          v-for="(item, index) in companyList"
          :key="index"
        >
          <view
            class="idcard box box-column-center box-center"
            @tap="uploadIdcard(index)"
          >
            <image :src="item.imgUrl" class="width height company-img" />
            <image
              src="/static/images/camera_icon.png"
              class="camera"
              mode="widthFix"
            />
          </view>
          <view>{{ item.name }}</view>
        </view>
      </view>

      <!-- 提交 -->
      <view
        class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter"
        @tap="submitAuth"
        >确认提交</view
      >
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { chooseImage } from "@/utils/choose";
import regexp from "@/utils/regexp";
import { companyAuth, companyAuthStatus } from "@/apis/user";
import { provinceData, cityData } from "@/utils/area";

export default {
  data() {
    return {
      serviceForm: {
        // 行业分类
        classify: [],
      },
      pickerClassifys: [], // picker专属的分类列表格式
      pickerFirstColumnValue: 0,
      companyList: [
        {
          name: "上传营业执照图片",
          imgUrl: "",
        },
        {
          name: "上传认证授权书",
          imgUrl: "",
        },
      ],
      companyName: "",
      name: "",
      idcard: "",
      address: ["北京市", "市辖区"],
      companyAddress: "",
      authInfo: {}, // 认证状态信息
      provinceData,
      cityData,
      provinceIndex: 0,
      cityIndex: 0,
      addressIndex: [0, 0],
      awaitStatus: false,
    };
  },

  computed: {
    ...mapState(["classifys"]),
  },

  onLoad() {
    // 发布服务初始化数据
    this.initClassiysData(0);

    this.getAuthStatus();
  },

  methods: {
    /**
     * 初始化分类数据
     */
    initClassiysData(index) {
      this.pickerClassifys = [[], [], []];
      this.serviceForm.classify = [0, 0, 0];

      this.pickerClassifys[0] = this.classifys;
      this.pickerClassifys[1] = this.classifys[0]._child;
      this.pickerClassifys[2] = this.classifys[0]._child[0]._child;
    },

    // 分类第更改回调
    onClassifyColumnChange(event) {
      let { column, value } = event.detail;

      if (column == 0) {
        // 第一项更改
        this.pickerClassifys[1] = this.classifys[value]._child;
        this.pickerClassifys[2] = this.classifys[value]._child[0]._child;
        this.pickerFirstColumnValue = value;
      } else if (column == 1) {
        // 第二项更改
        this.pickerClassifys[2] = this.classifys[
          this.pickerFirstColumnValue
        ]._child[value]._child;
      }
    },

    // 分类更改回调
    onClassifyChange(event) {
      this.serviceForm.classify = event.target.value;
    },

    changeArea(event) {
      this.address = event.detail.value;
    },

    /**
     * 上传企业图
     */
    async uploadIdcard(index) {
      let data = await chooseImage(1);
      this.companyList[index].imgUrl = data[0].url;
    },

    /**
     * 提交验证
     */
    async submitAuth() {
      let {
        companyName,
        name,
        idcard,
        address,
        companyAddress,
        companyList,
        serviceForm,
      } = this;

      if (
        !companyName ||
        !name ||
        !idcard ||
        !address.length ||
        !companyAddress
      )
        return this.$toast("请填写完整验证信息");
      let undoneImg = companyList.filter((item) => !item.imgUrl);
      if (undoneImg && undoneImg.length)
        return this.$toast("请上传公司营业执照和认证授权书");
      if (!regexp.idcard.test(this.idcard))
        return this.$toast("请填写正确的法人身份证号");

      let params = {
        company_name: companyName,
        province: address[0],
        city: address[1],
        address: companyAddress,
        faRen: name,
        faidcard: idcard,
        license_photo: companyList[0].imgUrl,
        warrant_photo: companyList[1].imgUrl,
        cate_id: this.classifys[serviceForm.classify[0]]._child[
          serviceForm.classify[1]
        ]._child[serviceForm.classify[2]].id,
      };

      let { code, data } = await companyAuth(params);
      if (code === 200) this.$toast("已提交认证信息，请等待审核");
    },

    /**
     * 获取验证状态
     */
    async getAuthStatus() {
      try {
        let { code, data } = await companyAuthStatus();
        if (code === 200) this.authInfo = data;
        this.awaitStatus = true;
      } catch (_) {
        this.awaitStatus = true;
      }
    },

    /**
     * 切换省级
     */
    changeProvince(event) {
      let { column, value } = event.detail;
      if (column === 0) {
        this.provinceIndex = value;
      } else {
        this.cityIndex = value;
      }
    },

    changeAddress(event) {
      this.addressIndex = event.detail.value;
      this.address[0] = this.provinceData[this.provinceIndex].label;
      this.address[1] = this.cityData[this.provinceIndex][this.cityIndex].label;
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .uni-input {
    margin-bottom: 0;
    border: none;
  }

  .company-block {
    .idcard {
      width: 210upx;
      height: 140upx;
      margin-right: 20px;

      .company-img {
        object-fit: contain;
      }

      .camera {
        position: absolute;
        width: 90upx;
        opacity: 0.8;
      }
    }
  }

  .success-icon {
    width: 80upx;
    margin: 30upx auto;
  }
}
</style>
